<template>
    <div id="app">
        <button class="button" v-for="(route, index) in routes" :key="index" @click="push(route)">{{ route.meta.title }}</button>
        <router-view></router-view>
    </div>
</template>

<script>
import { routes } from './router';
export default {
    name: 'App',
    components: {},
    provide(){
        return {
            app: this
        }
    },
    data() {
        return {
            routes,
            userInfo: null,
        };
    },
    mounted(){
        this.getUserInfo()
    },
    methods: {
        getUserInfo(){
            setTimeout(() => {
                this.userInfo = {
                    name: 'wenfp',
                    age: 20
                }
            }, 2000);
        },
        push(r) {
            this.$router.push(r.path);
        },
    },
};
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.button{
    height: 40px;
    padding: 0 10px;
    margin-right: 10px;
}
</style>
